<template>
    <rx-layout>
        <div slot="center" style>
            <rx-fit :isheader="isheader">
                <div slot="toolheader" foldheader="true" foldbtn="false" border="false">
                    <div class="table-operator">
                        <a-button type="primary" icon="plus" @click="add">{{$ti18('rxList.newBtn','新建')}}</a-button>
                        <a-dropdown
                            v-if="removeEnable && selectedRowKeys.length > 0 && editEnable && selectedRowKeys.length > 0">
                            <a-button style="margin-left: 8px"> {{$ti18('rxList.moreBtn','更多')}}
                                <a-icon type="down"/>
                            </a-button>
                            <a-menu slot="overlay">
                                <a-menu-item
                                    key="1"
                                    @click="editOne"
                                    v-if="editEnable && selectedRowKeys.length > 0"
                                    alias="formRuleEdit"
                                    :butn-type="'primary'"
                                    :show-no-right="false"
                                >
                                    <a-icon type="edit"/>
                                    {{$ti18('rxList.editBtn','编辑')}}
                                </a-menu-item>
                                <a-menu-item
                                    key="2"
                                    @click="delByIds(selectedRowKeys)"
                                    v-if="removeEnable && selectedRowKeys.length > 0"
                                    alias="formRuleDelete"
                                    :butn-type="'danger'"
                                    :show-no-right="false"
                                >
                                    <a-icon type="delete"/>
                                    {{$ti18('rxList.delBtn','删除')}}
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </div>
                    <span class="search-btn-box" v-if="!isheader">
            <span class="search-btn" @click.stop="searchshow"><i class="iconfont iconguolv"></i>{{$ti18('rxList.leachBtn','过滤')}}</span>
          </span>
                </div>
                <div btnalign="right" slot="searchbar" v-if="fitSearch" @search="search" @cancel="cancel"
                     @close="closeSearchbar">
                    <a-form :layout="colLayout">
                        <a-row :gutter="24">
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.calendarName','日历名称')">
                                    <a-input :placeholder="i18n('form.calendarName','日历名称','input')"
                                             v-model="queryParam.Q_CAL_NAME__S_LK"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <rx-grid
                    ref="table"
                    :allowRowSelect="true"
                    :multiSelect="true"
                    :columns="columns"
                    :bordered="isBorder"
                    :defaultPageSize="10"
                    url="/api-bpm/bpm/core/bpmCalSetting/query"
                    :queryParam="queryParam"
                    data-field="result.data"
                    :pageSizeOptions="['10','30','40']"
                    id-field="settingId"
                    @selectChange="onSelectChange"
                >
                      <span slot="isCommon" slot-scope="{ text,record }">
                        <a-tag :color="defaultMap[text].color">
                          <span>{{defaultMap[text].text}}</span>
                        </a-tag>
                      </span>
                      <span slot="action" slot-scope="{ text, record }" class="actionIcons">
                        <span v-if="editEnable" @click.stop="edit(record)">{{$ti18('rxList.editBtn','编辑')}}</span>
                        <span @click="openCalendar(record.settingId)" :title="i18n('list.calSetting','日历设定')">{{i18n('list.calSetting','日历设定')}}</span>
                        <span @click="openCalendarTest(record.settingId)" :title="i18n('list.test','测试')">{{i18n('list.test','测试')}}</span>
                        <span v-if="removeEnable" @click.stop="delByIds([record.settingId])" :title="$ti18('rxList.delBtn','删除')">{{$ti18('rxList.delBtn','删除')}}</span>
                      </span>
                </rx-grid>
            </rx-fit>
        </div>
    </rx-layout>
</template>

<script>
    import BpmCalSettingApi from '@/api/bpm/core/bpmCalSetting'
    import BpmCalSettingEdit from './BpmCalSettingEdit'
    import {BaseList,Util} from '@lowcode/jpaas-common-lib';

    export default {
        name: 'BpmCalSettingList',
        mixins: [BaseList],
        data() {
            return {
                columns: [
                    {
                        title: this.$ti18('rxList.index', '序号'),
                        type: 'indexColumn',
                        width: 40,
                        dataIndex: 'serial',
                        scopedSlots: {customRender: 'serial'}
                    },
                    {title: this.i18n('form.calendarName', '日历名称'), dataIndex: 'calName', width: 100},
                    {
                        title: this.i18n('form.default', '默认'),
                        dataIndex: 'isCommon',
                        width: 120,
                        scopedSlots: {customRender: 'isCommon'}
                    },
                    {title: this.$ti18('rxForm.createTime','创建时间'), dataIndex: 'createTime', sorter: true, sortField: 'CREATE_TIME_', width: 120},

                    {
                        title: this.$ti18('rxList.action', '操作'),
                        width: Util.langSize({'zh-CN':120,'en-US':200,'ja-JP':200,'es-ES':200}),
                        dataIndex: 'action',
                        scopedSlots: {customRender: 'action'}
                    }
                ],
                component: BpmCalSettingEdit,
                comment: this.i18n('list.calSetting', '日历设定'),
                widthHeight: ['600px', '300px'],
                defaultMap: {
                    YES: {color: 'green', text: this.i18n('yes','是')},
                    NO: {color: 'red', text: this.i18n('no','否')}
                },
            }
        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "bpmCalSetting", key);
            },
            openCalendarTest(settingId) {
                var config = {
                    curVm: this, widthHeight: ['800px', '600px']
                };

                Object.assign(config, {
                    data: {
                        settingId: settingId
                    }
                });
                var self_ = this;
                BpmCalSettingApi.openCalendarTest(config);
            },
            openCalendar(settingId) {
                var config = {
                    curVm: this, max: true
                };

                Object.assign(config, {
                    data: {
                        settingId: settingId
                    }
                });
                var self_ = this;
                BpmCalSettingApi.openBpmCalendarEdit(config);
            },
            delById(ids) {
                return BpmCalSettingApi.del({ids: ids.join(',')});
            },
            getListByParams(parameter) {
                return BpmCalSettingApi.query(parameter)
            },
            search() {
                this.$refs.table.loadData();
            },
            cancel() {
                this.resetSearch();
            },
            closeSearchbar() {
                //关闭过滤弹窗；（点击X触发）
                this.fitSearch = false;
            }
        }
    }
</script>
<style scoped>

</style>

